<template>
  <el-dialog v-model="menuPermitTree.allotPermitVisible" title="分配权限" width="30%" height="400"
    :before-close="closeEditDialog">
    <div class="down-tree">
      <el-tree :data="menuPermitTree.tableData" :props="defaultPermitTreeProps" node-key="id"
        :default-checked-keys="checkedKeys" show-checkbox ref="menuTreeRef" />
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeEditDialog">关闭</el-button>
        <el-button type="primary" @click="submitPermit">提交</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { ElTree } from 'element-plus';
import { Permit } from '@/apis/model/system/PermitModel';

const menuTreeRef = ref(ElTree);

const menuPermitTree = defineProps<{
  allotPermitVisible?: boolean,
  tableData?: Array<Permit>
  checkedKeys?: Array<Number>
  menuId?: number
}>()

// emit function
const emit = defineEmits(["closeAllotPermitDialog", "submitAlotPermit"]);

// 关闭按钮
const closeEditDialog = () => {
  emit("closeAllotPermitDialog", {
    allotPermitVisible: !menuPermitTree.allotPermitVisible,
  })
}

const submitPermit = () => {
  // 目前被选中的菜单节点
  let checkedKeys = menuTreeRef.value.getCheckedKeys();
  console.log(checkedKeys);
  emit("submitAlotPermit", {
    allotPermitVisible: !menuPermitTree.allotPermitVisible,
    checkedKeys: checkedKeys,
    menuId: menuPermitTree.menuId
  })
}

const defaultPermitTreeProps = {
  children: 'children',
  label: 'authorityName',
}

// 加载权限
onMounted(() => {
})

</script>
<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}

.down-tree {
  height: 300px;
  display: block;
  overflow-y: scroll;
}
</style>
